<template>
  <div class="main-head w100 h100">
    <div class="head-left">
      <img src="../../../static/image/main/title.png" style="margin-right:10px;">
      <div class="brand">{{platformCn}}</div>
    </div>
    <div class="head-right">
      <div class="time">
        <span class="weekend">星期{{weekend}}</span>{{date}}
      </div>
      <!--<div class="vertical-line-container">-->
        <!--<div class="vertical-line"></div>-->
      <!--</div>-->
      <main-location></main-location>
      <div class="log-out" @click="logout">
        <img src="../../../static/image/main/logout.png" alt="">退出</div>
    </div>
    <common-dialog :title="dialogTitle" :desc="dialogDesc" :is-show="deleteDialogShow" @close="handleClose"></common-dialog>
  </div>
</template>

<script>
  import CommonDialog from '../../components/CommonDialog'
   import MainLocation from '../../components/MainLocation'
  import { mapMutations } from 'vuex'
  import Config from '../../config'
  export default {
    name: 'MainHead',
    components: {
      CommonDialog,
      MainLocation
    },
    data () {
      return {
        platformCn: Config.PLATFORM_CN,
        time: `星期五 13:05`,
        weekend: '',
        date: '',
        interval: null,
        LOGIN_PATH_NAME: '/login',
        // 弹出框
        deleteDialogShow: false,
        dialogTitle: '退出内容',
        dialogDesc: '确定退出当前登录？'
      }
    },
    mounted () {
      this.getDate()
      this.interval = setInterval(() => {
        this.getDate()
      }, 1000)
    },
    destroyed () {
      clearInterval(this.interval)
    },
    methods: {
      ...mapMutations('user', {
        setUser: 'setUser'
      }),
      /**
       * 获取“星期几 小时：分钟”
       * */
      getDate () {
        const date = new Date()
        var weekends = ['日', '一', '二', '三', '四', '五', '六']
        const day = date.getDay()
        this.weekend = weekends[day]
        this.date = `${this.$util.Date.getHours(date)}:${this.$util.Date.getMinutes(date)}`
      },
      /**
       * 退出登录
       * */
      logout () {
        this.deleteDialogShow = true
      },
      /**
       * 点击确定退出登录
       * */
      handleClose (id) {
        this.deleteDialogShow = false
        if (!id) {
          return
        }
        this.logoutFromServer()
          .then(res => this.logoutSuccess())
          .catch(e => this.logoutSuccess())
      },
      /**
       * 通知后台退出登录
       * */
      logoutFromServer () {
        return new Promise((resolve, reject) => {
          const url = `${Config.AUTH_URL}/logout`
          this.$http.post(url)
            .then(data => resolve(data))
            .catch(e => reject(e))
        })
      },
      /**
       * 退出登录成功
       * */
      logoutSuccess () {
        this.$message.success('退出登录成功')
        this.clearData()
        this.$router.push({
          path: this.LOGIN_PATH_NAME
        })
      },
      /**
       * 清空浏览缓存的数据
       * */
      clearData () {
        // TODO 清空vuex中user数据
        this.setUser(null)
        // 清空sessionStorage中token
        sessionStorage.removeItem('token')
        // 清空localStorage中store
        localStorage.removeItem('vuex')
        // 清空sessionStorage中paths
        sessionStorage.removeItem('paths')
        // 清空sessionStorage中buttons
        sessionStorage.removeItem('buttons')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main-head {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 30px 0 24px;
    .head-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .brand {
        font-size: 26px;
        font-weight: bold;
      }
    }
    .head-right {
      font-size: 12px;
      display: flex;
      align-items: stretch;
      justify-content: flex-end;
      .time {
        display: flex;
        align-items: center;
        padding: 0 32px;
        .weekend {
          margin-right: 8px;
        }
      }
      .vertical-line-container {
        display: flex;
        align-items: center;
        .vertical-line {
          height: 28px;
          width: 2px;
          box-sizing: border-box;
          border-left: 1px solid #FF6767;
          border-right: 1px solid #D12A2A;
          margin: 0;
        }
      }
      .log-out {
        cursor: pointer;
        position: relative;
        display: flex;
        align-items: center;
        align-content: flex-start;
        padding: 0 32px;
        img {
          margin-right: 2px;
          width: 14px;
          height: 16px;
        }
      }
    }
  }
</style>
